<template>
  <div class="orderDetail">
    <showBanner class="white"></showBanner>
    <!-- 查看订单详情 -->
    <div class="containor">
      <div class="orderTitle">
        <div class="title">订单信息</div>
        <div class="titleRow">
          <span>订单编号:{{orderList.orderNum}}</span>
        </div>
        <div class="titleRow">
          <span>订单类型:</span>
          <span v-if="orderList.type===1">普通订单</span>
          <span v-if="orderList.type===2">特价订单</span>
          <span v-if="orderList.type===3">活动订单</span>
        </div>
        <div class="titleRow">
          <span>付款状态:</span>
          <span v-if="orderList.status==='0'">未付款</span>
          <span v-if="orderList.status==='1'">待确认</span>
          <span v-if="orderList.status==='2'">待拍摄</span>
          <span v-if="orderList.status==='3'">已完成</span>
          <span v-if="orderList.status==='4'">已评价</span>
          <span v-if="orderList.status==='5'">已取消</span>
          <span v-if="orderList.status==='6'">商家取消,待退款</span>
          <span v-if="orderList.status==='7'">已退款</span>
          <span v-if="orderList.status==='8'">商家超时已取消</span>
        </div>
        <div class="titleRow">
          <span>空间名称:{{orderList.spaceName}}</span>
        </div>
        <div class="titleRow">
          <span>购买日期:{{orderList.createTime}}</span>
        </div>
        <div class="titleRow">
          <span>付款时间:{{orderList.payTime}}</span>
        </div>
        <div class="titleRow">
          <span>商家确认状态:</span>
          <span v-if="orderList.storeState===1">待确认</span>
          <span v-if="orderList.storeState===2">已确认</span>
          <span v-if="orderList.storeState===3">已取消</span>
        </div>
        <div class="titleRow">
          <span>实际支付金额:{{orderList.payMoney}}</span>
        </div>
        <div class="titleRow">
          <span>优惠券支付金额:{{orderList.discount}}</span>
        </div>
        <div class="titleRow">
          <span>支付方式:</span>
          <span v-if="orderList.payType==='1'">账号余额</span>
          <span v-if="orderList.payType==='2'">支付宝</span>
          <span v-if="orderList.payType==='3'">微信</span>
          <span v-if="orderList.payType==='12'">账号余额加支付宝</span>
          <span v-if="orderList.payType==='13'">账号余额加微信</span>
        </div>
        <div class="titleRow">
          <span>优惠券使用状态:{{orderList.discount===(''||0)?'未使用':'已使用'}}</span>
        </div>
      </div>
      <div class="orderTitle">
        <div class="title">拍摄信息</div>
        <div class="titleRow">
          <span v-if="orderList.type===1">拍摄日期:{{orderList.shootDate}} ({{orderList.beginTime}}~{{orderList.endTime}})</span>
          <span v-if="orderList.type===2">拍摄日期:{{orderList.shootValidity}}</span>
          <span v-if="orderList.type === 3">2018-12-20~2019-12-20</span>
        </div>
        <div class="titleRow">
          <span>取景区域:{{orderList.photoArea}}</span>
        </div>
        <!-- <div class="titleRow">
          <span>人数限制:{{orderList.presentPeople}}</span>
        </div> -->
        <div class="titleRow">
          <span>可携带设备:{{orderList.equipment}}</span>
        </div>
        <div class="titleRow">
          <span>拍摄状态:</span>
          <span v-if="orderList.shootingState==='0'">未完成</span>
          <span v-if="orderList.shootingState==='1'">已完成</span>
        </div>
      </div>
      <div class="orderTitle">
        <div class="title">费用信息</div>
        <div class="titleRow" style="width:100%">
          <span>拍摄费用:￥{{orderList.shootMoney}}</span>
        </div>
        <div class="titleRow" style="width:100%">
          <span>组合费用:￥{{orderList.stayPeople*orderList.stayPrice+orderList.lunchPeople*orderList.lunchPrice+orderList.dinnerPeople*orderList.dinnerPrice}}</span>
          <!-- <span style="margin-left:100px">明细:</span> -->
          <span style="margin-left:50px">{{orderList.date}}晚入住({{orderList.stayPeople}}人):￥{{orderList.stayPeople*orderList.stayPrice}}</span>
          <span style="margin-left:20px">{{orderList.shootDate}} 午餐({{orderList.stayPeople}}人):￥{{orderList.lunchPeople*orderList.lunchPrice}}</span>
          <span style="margin-left:20px">{{orderList.shootDate}} 晚餐({{orderList.stayPeople}}人):￥{{orderList.dinnerPeople*orderList.dinnerPrice}}</span>
        </div>
      </div>
      <div class="orderTitle">
        <div class="title">用户信息</div>
        <div class="titleRow">
          <span>用户姓名:{{orderList.userName}}</span>
        </div>
        <div class="titleRow">
          <span>联系电话:{{orderList.userTel}}</span>
        </div>
        <div class="titleRow" v-show="show">
          <span v-if="orderList.type===1">预计到场人数:{{orderList.presentPeople}}</span>
        </div>
        <div class="titleRow">
          <span>公司名称:{{orderList.company}}</span>
        </div>
        <div class="titleRow">
          <span>备注信息:{{orderList.remarks}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import showBanner from '@/base/showBanner/showBanner'
export default {
  name: 'orderDetail',
  components: {
    showBanner
  },
  data () {
    return {
      orderList: {
        beginTime: '',
        createTime: '',
        dinnerPeople: '',
        dinnerPrice: '',
        discount: '',
        endTime: '',
        equipment: '',
        lunchPeople: '',
        lunchPrice: '',
        orderNum: '',
        payMoney: '',
        payType: '',
        photoArea: '',
        presentPeople: '',
        remarks: '',
        shootDate: '',
        shootMoney: '',
        shootValidity: '',
        shootingState: '',
        spaceCover: '',
        spaceName: '',
        spaceTitle: '',
        status: '',
        stayPeople: '',
        stayPrice: '',
        storeState: '',
        type: '',
        userName: '',
        userTel: '',
        date: ''
      },
      show: true
    }
  },
  created () {
    this.getOrderDetail()
  },
  methods: {
    getOrderDetail () {
      this.$axios.post('/api/order/showOrderDetailsById', {
        id: this.$route.query.id
        // id: '76729d22fd77483aaa3d998b6e1a54dd'
      }).then(response => {
        const res = response.data
        if (res.code === '00000000') {
          let arr = res.order
          console.log(arr)
          this.orderList.beginTime = arr[0].beginTime
          this.orderList.payTime = arr[0].payTime
          // if (arr[0].payTime !== null) {
          //   this.orderList.payTime = arr[0].payTime.substring(0, 10) + ' ' + arr[0].payTime.substring(11, 19)
          // }
          if (arr[0].type === 1) {
            console.log('aaa')
            this.show = true
          } else {
            this.show = false
          }
          this.orderList.createTime = arr[0].createTime
          this.orderList.dinnerPeople = arr[0].dinnerPeople
          this.orderList.dinnerPrice = arr[0].dinnerPrice
          this.orderList.discount = arr[0].discount
          this.orderList.endTime = arr[0].endTime
          this.orderList.equipment = arr[0].equipment
          this.orderList.lunchPeople = arr[0].lunchPeople
          this.orderList.lunchPrice = arr[0].lunchPrice
          this.orderList.orderNum = arr[0].orderNum
          this.orderList.payMoney = arr[0].payMoney
          this.orderList.payType = arr[0].payType
          this.orderList.photoArea = arr[0].photoArea
          this.orderList.presentPeople = arr[0].presentPeople
          this.orderList.remarks = arr[0].remarks
          this.orderList.shootDate = arr[0].shootDate
          this.orderList.shootMoney = arr[0].shootMoney
          this.orderList.shootValidity = arr[0].shootValidity
          this.orderList.shootingState = arr[0].shootingState
          this.orderList.spaceCover = arr[0].spaceCover
          this.orderList.spaceName = arr[0].spaceName
          this.orderList.spaceTitle = arr[0].spaceTitle
          this.orderList.status = arr[0].status
          this.orderList.stayPeople = arr[0].stayPeople
          this.orderList.stayPrice = arr[0].stayPrice
          this.orderList.storeState = arr[0].storeState
          this.orderList.type = arr[0].type
          this.orderList.userName = arr[0].userName
          this.orderList.userTel = arr[0].userTel
          this.orderList.company = arr[0].company
          var translateDate = ''
          var dateString = ''
          var monthString = ''
          var dayString = ''
          translateDate = arr[0].shootDate.replace('-', '/').replace('-', '/')
          var newDate = new Date(translateDate)
          newDate = newDate.valueOf()
          newDate = newDate - 24 * 60 * 60 * 1000 // 备注 如果是往前计算日期则为减号 否则为加号
          newDate = new Date(newDate)
          // 如果月份长度少于2，则前加0补位
          if ((newDate.getMonth() + 1).toString().length === 1) {
            monthString = 0 + '' + (newDate.getMonth() + 1).toString()
          } else {
            monthString = (newDate.getMonth() + 1).toString()
          }
          // 如果天数长度少于2则前加0补位
          if (newDate.getDate().toString().length === 1) {
            dayString = 0 + '' + newDate.getDate().toString()
          } else {
            dayString = newDate.getDate().toString()
          }
          dateString = newDate.getFullYear() + '-' + monthString + '-' + dayString
          this.orderList.date = dateString
        }
      })
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.orderDetail
  margin 16px
  background #fff
  height 800px
  .containor
    padding 20px 16px 16px
    .orderTitle
      display flex
      flex-flow row wrap
      margin-bottom 20px
      padding 0 24px
      border-bottom 1px solid #F2F6FC
      .title
        width 100%
        // padding 0 24px
        font-size 16px
        line-height 50px
      .titleRow
        width 30%
        font-size 14px
        margin-bottom 18px
        color #888888
        display flex
        flex-flow row nowrap
        align-items center
        .textColor
          color #444
</style>
